<template>
  <a-modal
      v-model:visible="visible"
      title="路由列表"
      ok-text="确认"
      :hideCancel="true"
      :mask-closable="true"
      @cancel="handleCancel"
      @before-ok="handleSubmit"
      width="80%"
      style="min-width: 900px"
  >
    <div v-for="item in list" class="flex-column">
      <div class="flex-row">
        <span style="margin-right: 10px">网关监听端口:</span>
        <b style="color: red;margin-right: 20px">{{ item.port }}</b>
        <span style="margin-left: 20px;margin-right: 10px">SSL证书: </span>
        <b style="color: red;margin-right: 40px">{{ item.ssl ? '引用 ' + item.ssl : '未引用' }}</b>
        <span style="margin-left: 20px;margin-right: 10px">访问URL:</span>
        <a v-if="!item.ssl" target="_blank" :href="baseURL+':' + item.port"
           style="color: red;cursor: pointer" class="port">
          {{ baseURL + ':' + item.port }}
        </a>
        <a v-if="item.ssl" target="_blank" :href="item.sslAddress"
           style="color: red;cursor: pointer" class="port">
          {{ item.sslAddress }}
        </a>
      </div>
      <table style="border: 1px solid #E5E6EB;border-spacing: 0;border-collapse: separate">
        <tr>
          <th>类型</th>
          <th>备注</th>
          <th>路由</th>
          <th>目标</th>
        </tr>
        <tr v-for="pass in item.passWs" style="color: #00B418">
          <th>ws</th>
          <th>websocket转发</th>
          <th>{{ pass.source ? pass.source : '/' }}</th>
          <th>{{ pass.target }}</th>
        </tr>
        <tr v-for="pass in item.passHttp" style="color: #165DFF">
          <th>pass</th>
          <th class="flex-column">
            <span>http转发</span>
            <span v-if="item.accessCheck.enable" style="cursor: pointer;" title="2分钟内单IP访问频率超过后被加入黑名单">
              rate={{ item.accessCheck.rate }}
            </span>
          </th>
          <th>{{ pass.source ? pass.source : '/' }}</th>
          <th>{{ pass.target }}</th>
        </tr>
        <tr v-for="dist in item.staticDist" style="color: #F76560">
          <th>dist</th>
          <th class="flex-column" style="font-size: 12px;line-height: 14px">
            <span>状态：{{ dist.enable ? '启用' : '停用' }}</span>
            <span>模式：{{ dist.mode }}</span>
            <span>索引：{{ dist.index }}</span>
            <span>缓存：{{ dist.fileCache ? '启用' : '停用' }}</span>
          </th>
          <th>{{ dist.path }}</th>
          <th>{{ dist.root.replaceAll('\\', '/') }}</th>
        </tr>
      </table>
      <a-divider/>
    </div>
    <div class="flex-column">
      <table style="border: 1px solid #E5E6EB;border-spacing: 0;border-collapse: separate">
        <tr>
          <th>类型</th>
          <th>备注</th>
          <th>监听端口</th>
          <th>目标</th>
        </tr>
        <tr v-for="item in tcp" style="color: #165DFF">
          <th>TCP</th>
          <th class="flex-column">
            <span style="color: red;">SSL证书: {{ item.ssl ? '引用 ' + item.ssl : '未引用' }}</span>
            <span v-if="item.accessCheck.enable" style="cursor: pointer;" title="2分钟内单IP访问频率超过后被加入黑名单">
              rate={{ item.accessCheck.rate }}
            </span>
          </th>
          <th>{{ item.port }}</th>
          <th>{{ item.targetHost+':'+item.targetPort }}</th>
        </tr>
      </table>
      <a-divider/>
    </div>
  </a-modal>
</template>

<script setup>
import apiAll from "@/api/apiAll.js";
import {ref} from "vue";

const list = ref({});
const tcp = ref({});
const visible = ref(false);
const handleSubmit = (done) => {
  visible.value = false;
};
const baseURL = ref('http://' + window.location.hostname)

const handleCancel = () => {
  visible.value = false;
};

const show = () => {
  apiAll.configApi.routerList().then(res => {
    list.value = res.data.routerConfigs
    tcp.value = res.data.tcpConfigs
    // console.log(res.data)
    visible.value = true
  })
};

defineExpose({show});
</script>
<style scoped>
td, th {
  border: 1px solid #E5E6EB; /* 设置单元格的边框为1px实线黑色 */
  padding: 5px; /* 设置单元格内的填充为5px */
}
</style>
